<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>

<form name="form0" id="form0" class="form-horizontal">

    <div class="form-group">
        <label for="username" class="col-sm-2 control-label">Username</label>
        <div class="col-sm-10">
            <input type="text" id="username" name="username"  class="form-control">
        </div>
    </div>

    <div class="form-group">
        <label for="password" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" id="password" name="password"  class="form-control">
        </div>
    </div>

    <div class="form-group">
        <label for="remark">Remark</label>
        <div class="col-sm10">
            <textarea id="remark" name="remark"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label for="fileView">Attach</label>
        <div>
            <input type="file" id="file0" name="file0" style="display: none" onchange="changeFile(this,'fileView')"/>
            <div class="input-group">
                <input type="text" id="fileView" name="fileView" class="form-control" readonly>
                <div class="input-group-addon" onclick="selectFile()">Select file</div>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">sex</label>
        <div class="col-sm-10">
            <label class="radio-inline"><input type="radio" name="sex" value="1" checked>female</label>
            <label class="radio-inline"><input type="radio" name="sex" value="2">male</label>
            <label class="radio-inline"><input type="radio" name="sex" value="3">other</label>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label"><input type="checkbox" id="fav_checkAll" onclick="toggleCheckAll(event,'form0','fav')"/>fav</label>
        <div class="col-sm-10">
            <label class="checkbox-inline"> <input type="checkbox" name="fav" value="travel" onclick="listenCheckCount(this)" checked> travel</label>
            <label class="checkbox-inline"> <input type="checkbox" name="fav" value="eat" onclick="listenCheckCount(this)" checked> eat</label>
            <label class="checkbox-inline"> <input type="checkbox" name="fav" value="book" onclick="listenCheckCount(this)"> book</label>
        </div>
    </div>

    <div class="form-group">
        <label for="gj" class="col-sm-2 control-label">Country</label>
        <div class="col-sm-10">
            <select id="gj" name="gj" class="form-control selector">
                <option value="zg" selected>china</option>
                <option value="mg">usa</option>
                <option value="rb">japan</option>
                <option value="yg">england</option>
                <option value="fg">france</option>
                <option value="ydl">Italy</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <input class="btn btn btn-primary" type="button" value="赋值" onclick="setPage()">
            <input class="btn btn btn-primary" type="button" value="取值" onclick="getPage()">
            <input class="btn btn btn-primary" type="button" value="保存" onclick="save()">
        </div>
    </div>

</form>
<script th:src="@{/js/jquery-2.1.4.min.js}"></script>
<script>
    /********************************************/
    /* input
     /********************************************/
    function setInputValueDefault(formId,inputName){
        setInputValue(formId,inputName,"");
    }
    function setInputValue(formId,inputName,value) {
        $("#"+formId).find("input[name="+inputName+"]").val(value);
    }
    function getInputValue(formId,inputName) {
        return $("#"+formId).find("input[name="+inputName+"]").val();
    }

    /********************************************/
    /* input file
     /********************************************/
    function selectFile(){
        document.getElementById("file0").click();
    }
    function changeFile(obj,fileViewId){
        var fileId = obj.id;
        console.log("fileId:",fileId);
        var file = document.getElementById(fileId).files[0];
        if(!(file.size>0 && file.size<10*1024*1024)){
            alert("file size limited 10m");
            return;
        }
        document.getElementById(fileViewId).value = file.name;
    }


    /********************************************/
    /* checkbox
     /********************************************/
    function refreshCheckboxValue(formId,checkboxItmName) {
        $("#"+formId).find("input[type='checkbox'][name="+checkboxItmName+"]:checked").prop("checked",false);
    }
    function setCheckboxValue(formId,checkboxItmName,arrValue) {
        refreshCheckboxValue(formId,checkboxItmName);
        $.each(arrValue,function(i,item){
            $("#"+formId).find("input[type='checkbox'][name="+checkboxItmName+"][value="+item+"]").prop("checked",true);
        })
    }
    function getCheckboxValue(formId,checkboxItmName) {
        var checkboxCheckedArr=[];
        $("#"+formId).find("input[type='checkbox'][name="+checkboxItmName+"]:checked").each(function(){
            checkboxCheckedArr.push($(this).val());
        });
        return checkboxCheckedArr;
    }

    /********************************************/
    /* checkbox Listener
     /********************************************/
    // 全选/反选  <label class="col-sm-2 control-label"><input type="checkbox" id="fav_checkAll" onclick="toggleCheckAll(event,'form0','fav')"/>fav</label>
    function toggleCheckAll(event,formId,checkName){
        console.log("toggleCheckAll");
        if(event){
            if(event.target.checked){
                $("#"+formId).find("input[type='checkbox'][name="+checkName+"]").prop('checked',true);
            }else{
                $("#"+formId).find("input[type='checkbox'][name="+checkName+"]").prop('checked',false);
            }
        }
    }
    // 监听是否所有项目都选择了。
    /*
     <div class="col-sm-10">
     <label class="checkbox-inline"> <input type="checkbox" name="fav" value="travel" onclick="listenCheckCount(this)" checked> travel</label>
     <label class="checkbox-inline"> <input type="checkbox" name="fav" value="eat" onclick="listenCheckCount(this)" checked> eat</label>
     <label class="checkbox-inline"> <input type="checkbox" name="fav" value="book" onclick="listenCheckCount(this)"> book</label>
     </div>
     */
    function listenCheckCount(obj){
        var name = obj.name;
        var len = getCheckboxItemLength("form0",name);
        checkAllGroup(name,len);
    }
    function checkAllGroup(name,len){
        var checkboxArr=[];
        $("#form0").find("input[type='checkbox'][name='"+name+"']:checked").each(function(){
            checkboxArr.push($(this).val());
        });
        if(checkboxArr.length===len){
            $("#"+name+"_checkAll").prop("checked",true);
        }else{
            $("#"+name+"_checkAll").prop("checked",false);
        }
    }
    function getCheckboxItemLength(formId,checkName){
        return $("#"+formId).find("input[type='checkbox'][name="+checkName+"]").length;
    }



    /********************************************/
    /* radio
     /********************************************/
    function setRadioValue(formId,radioItmName,value) {
        $("#"+formId).find("input[type='radio'][name="+radioItmName+"][value="+value+"]").prop("checked",true);

    }
    function getRadioValue(formId,radioItmName) {
        return $("#"+formId).find("input[type='radio'][name="+radioItmName+"]:checked").val();
    }


    /********************************************/
    /* select
     /********************************************/
    function setSelectedValue(formId,selectItmName,value) {
        $("#"+formId).find("select[name='"+selectItmName+"']").val(value);

    }
    function getSelectedValue(formId,selectItmName) {
        return $("#"+formId).find("select[name='"+selectItmName+"']").find("option:selected").val();
    }
</script>
<script>
    function setPage() {
        var data = {username: "ljw",password:"123",remark:"Hello world", sex: "1", fav: ['eat','book'], gj: "zg"};
        for(var i in data){
            console.log("key:",i,typeof i,"value:",data[i],typeof data[i]);
            if(i ==='username'){
                setInputValue("form0",i,data[i]);
            }else if(i==="password"){
                setInputValue("form0",i,data[i]);
            }else if(i ==="remark"){
                setInputValue("form0",i,data[i]);
            }else if(i==="sex"){
                setRadioValue("form0",i,data[i]);
            }else if(i==="fav"){
                setCheckboxValue("form0",i,data[i]);
            }else if(i==="gj"){
                setSelectedValue("form0",i,data[i]);
            }
        }
    }
    function getPage() {
        var $form0 = $("#form0");
        var usernameV = $form0.find("input[type='text'][name='username']").val();
        var passwordV = $form0.find("input[type='password'][name='password']").val();
        var remarkV = $form0.find("textarea[name='remark']").val();
        var sexValue = $form0.find("input[type='radio'][name='sex']:checked").val();
        var favValue=[];
        $form0.find("input[type='checkbox'][name='fav']:checked").each(function(){
            favValue.push($(this).val());
        });
        var countryV = $form0.find("select[name='gj']").find("option:selected").val();
        var data={};
        data.username=usernameV;
        data.password=passwordV;
        data.remark=remarkV;
        data.sex=sexValue;
        data.fav=favValue;
        data.gj=countryV;
        console.log("data:get:",data);
        console.log("================");
    }
    function save() {
        let fd = new FormData(document.getElementById("form0"));
        $.ajax({
            url: '/easyExcel/upload',
            type: 'post',
            data: fd,
            contentType: false,
            processData: false,
            success: function (result) {
                console.log('success',result);
            },
            error: function () {
                console.log('error');
            }
        });
    }
</script>
</body>
</html>